<!--
 * @Descripttion:
 * @version:
 * @Author: Connor
 * @Date: 2021-03-12 16:04:54
 * @LastEditors: Sam
 * @LastEditTime: 2021-03-16 16:31:40
-->
<template>
  <div class="padding" v-loading="loading">
    <el-card>
      <div slot="header" class="clearfix">
        <span>货量走势图</span>
      </div>

      <el-form v-model="searchForm" size="mini" label-width="90px">
        <el-row :gutter="10">
          <el-col :span="5">
            <el-form-item label="运单客户" prop="customerId" >
              <el-select v-model="searchForm.customerId" placeholder="请输入关键字搜索( 必填 )" clearable filterable remote :remote-method="remoteCustomer"
                         :style="{width: '100%'}">
                <el-option v-for="item in customerIdOptions" :key="item.id" :label="item.text" :value="parseInt(item.id)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="rangeInStockTime" >
              <div slot="label">入库时间：</div>
              <el-date-picker
                v-model="searchForm.rangeInStockTime"
                type="daterange"
                align="right"
                unlink-panels
                clearable
                style="width:100%"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="货量" size="mini" prop="cargoSize">
              <el-select v-model="searchForm.cargoSize" filterable multiple clearable style="width:100%">
                <el-option label="空运货量" value="0"></el-option>
                <el-option label="海运散货" value="1"></el-option>
                <el-option label="海运整柜" value="2"></el-option>
                <el-option label="快递货量" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="5">
            <el-form-item label="目的国家">
              <el-select
                filterable
                multiple
                clearable
                style="width:90%"
                v-model="searchForm.countryId"
                placeholder="请选择目的国家(多选)"
              >
                <el-option
                  v-for="(item, value) in salePerformanceVo.countryMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="客户渠道">
              <el-select
                v-model="searchForm.customerChannelIds"
                filterable
                multiple
                clearable
                style="width:60%"
                placeholder="请选择客户渠道(多选)"
              >
                <el-option
                  v-for="(item, value) in salePerformanceVo.instockChannelMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="日期模式" size="mini" prop="cargoSize">
              <el-select v-model="searchForm.dateType" filterable clearable style="width:100%">
                <el-option label="日" value="0"></el-option>
                <el-option label="月" value="1"></el-option>
                <el-option label="年" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="statistics"
            >统计</el-button
            >
          </el-col>
        </el-row>
      </el-form>

      <line-chart
        v-if="chartData.xTitle"
        :chart-data="chartData"
        :titleInfo="titleInfo"
        :chartList="chartList"
      />
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import LineChart from "./components/LineChart";

export default {
  props: ["data"],
  components: {
    LineChart
  },
  data() {
    return {
      loading: false,
      salePerformanceVo: {
        countryMap: {},
        instockChannelMap: {},
      },
      customerIdOptions: [],
      searchForm: {
        customerId: "",
        rangeInStockTime: '',
        countryId: '',
        customerChannelIds: '',
        cargoSize: '',
        dateType: '',
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近30天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
        ]
      },
      titleInfo: {
        text: "货量走势图",
        subtext: ``,
        legend: ["空运货量", "海运散货", "海运整柜", "快递货量"]
      },
      chartList: [],
      chartData: {}
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData(){
      let data = await ajax("initCustomerCargoChart", {});
      this.salePerformanceVo = data.data;
    },
    async remoteCustomer(query){
      if (query !== '') {
        this.customerIdOptions = await ajax("searchCustomerSelect", {
          name: query
        });
      }else {
        this.customerIdOptions = {};
      }
    },
    async statistics(){
      if (!this.searchForm.customerId){
        this.$message.error("请选择客户");
        return;
      }
      if (!this.searchForm.rangeInStockTime){
        this.$message.error("请选择入库时间");
        return;
      }
      this.loading = true;
      ajax("searchCustomerCargoChart", this.searchForm).then(
        res => {
          this.loading = false;
          if (res.code == 200) {
            this.$message.success("保存成功");
            this.chartList = [];
            if(this.searchForm.cargoSize.length>0){
              if (this.searchForm.cargoSize.indexOf("0")>-1){
                this.chartList.push({ prop: "zxList", label: "空运货量(KGS)", color: "red" })
              }
              if (this.searchForm.cargoSize.indexOf("1")>-1){
                this.chartList.push( { prop: "lclList", label: "海运散货(CBM)", color: "blue" })
              }
              if (this.searchForm.cargoSize.indexOf("2")>-1){
                this.chartList.push( { prop: "fclList", label: "海运整柜(T)" , color: "black"})
              }
              if (this.searchForm.cargoSize.indexOf("3")>-1){
                this.chartList.push( { prop: "expressList", label: "快递货量(KGS)", color: "yellow" })
              }
            } else {
              this.chartList = [{ prop: "zxList", label: "空运货量(KGS)" },
                { prop: "lclList", label: "海运散货(CBM)" },
                { prop: "fclList", label: "海运整柜(T)" },
                { prop: "expressList", label: "快递货量(KGS)" }
              ];
            }
            this.chartData = res.data;
            this.titleInfo.subtext = this.searchForm.rangeInStockTime[0]+" ~ "+this.searchForm.rangeInStockTime[1];
          } else {
            this.$message.error("保存失败" + res.message);
          }
        },
        error => {
          console.log(error);
        }
      );
    },
  }
};
</script>
